<template>
	<div class="j-case">
		<div class="case-box container">
			<ul class="case-list">
				<li v-for="(item,index) in caseList" :key="index">
					<div class="jc-img">
						<router-link :to="'/news?id='+item.id" target="_blank">
							<img src="../../assets/product/case01.jpg">
						</router-link>
					</div>
					<router-link :to="'/news?id='+item.id" target="_blank" class="jc-content">
						<div class="jc-tt">
							<router-link :to="'/news/newsdetail?id='+item.id" target="_blank">{{item.title}}</router-link>
							<div class="jc-illness">
									<p><span>病例</span>：{{item.illnessName}}</p>
							</div>
						</div>
						<div class="jc-txt">{{item.content}}</div>
						<div class="jc-txt jc-doc-txt">
							<p><span>姓名</span>：{{item.name}}</p>
							<p><span>年龄</span>：{{item.age}}</p>
							<p><span>体重</span>：{{item.weight}}</p>
							<p><span>移植医院</span>：{{item.hospital}}</p>
						</div>
					</router-link>
				</li>
			</ul>
			<div class="jc-page-box">
				<el-pagination
					background
					@current-change="handleCurrentChange"
					layout="prev, pager, next"
					:current-page.sync="currentPage"
					:page-size="4"
					:total="totals">
				</el-pagination>
			</div>
		</div>
	</div>
</template>
<script>
import api from '../../service/api'
export default {
  components: {
    JHeader, JFooter, JNews
  },
  data () {
    return {
      currentPage: 1,
      totals: '',
      caseList: [],
      caseList2: [
        {id: 0, image: require('../../assets/product/case01.jpg'), title: '1在拯救生命的路上，我们矢志不渝中国干细胞集团移植满2500例', content: '2017年5月3日，中国干细胞集团联合上海市第一人民医院，成功为26岁的患者小杨进行了脐带血造血干细胞移植。这是中国干细胞集团成立13年来完成的第2500例脐带血造血干细胞临床移植。中国干细胞集团成为国内首家脐带血造血干细胞移植数达到2500例的专业机构...', name: '杨**', age: 26, weight: '56kg', hospital: '上海市第一人民医院', illnessName: '急性淋巴细胞白血病'},
        {id: 1, image: require('../../assets/product/case01.jpg'), title: '2在拯救生命的路上，我们矢志不渝中国干细胞集团移植满2500例', content: '2017年5月3日，中国干细胞集团联合上海市第一人民医院，成功为26岁的患者小杨进行了脐带血造血干细胞移植。这是中国干细胞集团成立13年来完成的第2500例脐带血造血干细胞临床移植。中国干细胞集团成为国内首家脐带血造血干细胞移植数达到2500例的专业机构...', name: '杨**', age: 26, weight: '56kg', hospital: '上海市第一人民医院', illnessName: '急性淋巴细胞白血病'},
        {id: 2, image: require('../../assets/product/case01.jpg'), title: '3在拯救生命的路上，我们矢志不渝中国干细胞集团移植满2500例', content: '2017年5月3日，中国干细胞集团联合上海市第一人民医院，成功为26岁的患者小杨进行了脐带血造血干细胞移植。这是中国干细胞集团成立13年来完成的第2500例脐带血造血干细胞临床移植。中国干细胞集团成为国内首家脐带血造血干细胞移植数达到2500例的专业机构...', name: '杨**', age: 26, weight: '56kg', hospital: '上海市第一人民医院', illnessName: '急性淋巴细胞白血病'},
        {id: 3, image: require('../../assets/product/case01.jpg'), title: '4在拯救生命的路上，我们矢志不渝中国干细胞集团移植满2500例', content: '2017年5月3日，中国干细胞集团联合上海市第一人民医院，成功为26岁的患者小杨进行了脐带血造血干细胞移植。这是中国干细胞集团成立13年来完成的第2500例脐带血造血干细胞临床移植。中国干细胞集团成为国内首家脐带血造血干细胞移植数达到2500例的专业机构...', name: '杨**', age: 26, weight: '56kg', hospital: '上海市第一人民医院', illnessName: '急性淋巴细胞白血病'},
        {id: 4, image: require('../../assets/product/case01.jpg'), title: '5在拯救生命的路上，我们矢志不渝中国干细胞集团移植满2500例', content: '2017年5月3日，中国干细胞集团联合上海市第一人民医院，成功为26岁的患者小杨进行了脐带血造血干细胞移植。这是中国干细胞集团成立13年来完成的第2500例脐带血造血干细胞临床移植。中国干细胞集团成为国内首家脐带血造血干细胞移植数达到2500例的专业机构...', name: '杨**', age: 26, weight: '56kg', hospital: '上海市第一人民医院', illnessName: '急性淋巴细胞白血病'},
        {id: 5, image: require('../../assets/product/case01.jpg'), title: '6在拯救生命的路上，我们矢志不渝中国干细胞集团移植满2500例', content: '2017年5月3日，中国干细胞集团联合上海市第一人民医院，成功为26岁的患者小杨进行了脐带血造血干细胞移植。这是中国干细胞集团成立13年来完成的第2500例脐带血造血干细胞临床移植。中国干细胞集团成为国内首家脐带血造血干细胞移植数达到2500例的专业机构...', name: '杨**', age: 26, weight: '56kg', hospital: '上海市第一人民医院', illnessName: '急性淋巴细胞白血病'},
        {id: 6, image: require('../../assets/product/case01.jpg'), title: '7在拯救生命的路上，我们矢志不渝中国干细胞集团移植满2500例', content: '2017年5月3日，中国干细胞集团联合上海市第一人民医院，成功为26岁的患者小杨进行了脐带血造血干细胞移植。这是中国干细胞集团成立13年来完成的第2500例脐带血造血干细胞临床移植。中国干细胞集团成为国内首家脐带血造血干细胞移植数达到2500例的专业机构...', name: '杨**', age: 26, weight: '56kg', hospital: '上海市第一人民医院', illnessName: '急性淋巴细胞白血病'},
        {id: 7, image: require('../../assets/product/case01.jpg'), title: '8在拯救生命的路上，我们矢志不渝中国干细胞集团移植满2500例', content: '2017年5月3日，中国干细胞集团联合上海市第一人民医院，成功为26岁的患者小杨进行了脐带血造血干细胞移植。这是中国干细胞集团成立13年来完成的第2500例脐带血造血干细胞临床移植。中国干细胞集团成为国内首家脐带血造血干细胞移植数达到2500例的专业机构...', name: '杨**', age: 26, weight: '56kg', hospital: '上海市第一人民医院', illnessName: '急性淋巴细胞白血病'},
        {id: 8, image: require('../../assets/product/case01.jpg'), title: '9在拯救生命的路上，我们矢志不渝中国干细胞集团移植满2500例', content: '2017年5月3日，中国干细胞集团联合上海市第一人民医院，成功为26岁的患者小杨进行了脐带血造血干细胞移植。这是中国干细胞集团成立13年来完成的第2500例脐带血造血干细胞临床移植。中国干细胞集团成为国内首家脐带血造血干细胞移植数达到2500例的专业机构...', name: '杨**', age: 26, weight: '56kg', hospital: '上海市第一人民医院', illnessName: '急性淋巴细胞白血病'},
        {id: 9, image: require('../../assets/product/case01.jpg'), title: '10在拯救生命的路上，我们矢志不渝中国干细胞集团移植满2500例', content: '2017年5月3日，中国干细胞集团联合上海市第一人民医院，成功为26岁的患者小杨进行了脐带血造血干细胞移植。这是中国干细胞集团成立13年来完成的第2500例脐带血造血干细胞临床移植。中国干细胞集团成为国内首家脐带血造血干细胞移植数达到2500例的专业机构...', name: '杨**', age: 26, weight: '56kg', hospital: '上海市第一人民医院', illnessName: '急性淋巴细胞白血病'},
        {id: 10, image: require('../../assets/product/case01.jpg'), title: '11在拯救生命的路上，我们矢志不渝中国干细胞集团移植满2500例', content: '2017年5月3日，中国干细胞集团联合上海市第一人民医院，成功为26岁的患者小杨进行了脐带血造血干细胞移植。这是中国干细胞集团成立13年来完成的第2500例脐带血造血干细胞临床移植。中国干细胞集团成为国内首家脐带血造血干细胞移植数达到2500例的专业机构...', name: '杨**', age: 26, weight: '56kg', hospital: '上海市第一人民医院', illnessName: '急性淋巴细胞白血病'},
        {id: 11, image: require('../../assets/product/case01.jpg'), title: '12在拯救生命的路上，我们矢志不渝中国干细胞集团移植满2500例', content: '2017年5月3日，中国干细胞集团联合上海市第一人民医院，成功为26岁的患者小杨进行了脐带血造血干细胞移植。这是中国干细胞集团成立13年来完成的第2500例脐带血造血干细胞临床移植。中国干细胞集团成为国内首家脐带血造血干细胞移植数达到2500例的专业机构...', name: '杨**', age: 26, weight: '56kg', hospital: '上海市第一人民医院', illnessName: '急性淋巴细胞白血病'},
        {id: 12, image: require('../../assets/product/case01.jpg'), title: '13在拯救生命的路上，我们矢志不渝中国干细胞集团移植满2500例', content: '2017年5月3日，中国干细胞集团联合上海市第一人民医院，成功为26岁的患者小杨进行了脐带血造血干细胞移植。这是中国干细胞集团成立13年来完成的第2500例脐带血造血干细胞临床移植。中国干细胞集团成为国内首家脐带血造血干细胞移植数达到2500例的专业机构...', name: '杨**', age: 26, weight: '56kg', hospital: '上海市第一人民医院', illnessName: '急性淋巴细胞白血病'},
        {id: 13, image: require('../../assets/product/case01.jpg'), title: '14在拯救生命的路上，我们矢志不渝中国干细胞集团移植满2500例', content: '2017年5月3日，中国干细胞集团联合上海市第一人民医院，成功为26岁的患者小杨进行了脐带血造血干细胞移植。这是中国干细胞集团成立13年来完成的第2500例脐带血造血干细胞临床移植。中国干细胞集团成为国内首家脐带血造血干细胞移植数达到2500例的专业机构...', name: '杨**', age: 26, weight: '56kg', hospital: '上海市第一人民医院', illnessName: '急性淋巴细胞白血病'},
        {id: 14, image: require('../../assets/product/case01.jpg'), title: '15在拯救生命的路上，我们矢志不渝中国干细胞集团移植满2500例', content: '2017年5月3日，中国干细胞集团联合上海市第一人民医院，成功为26岁的患者小杨进行了脐带血造血干细胞移植。这是中国干细胞集团成立13年来完成的第2500例脐带血造血干细胞临床移植。中国干细胞集团成为国内首家脐带血造血干细胞移植数达到2500例的专业机构...', name: '杨**', age: 26, weight: '56kg', hospital: '上海市第一人民医院', illnessName: '急性淋巴细胞白血病'},
        {id: 15, image: require('../../assets/product/case01.jpg'), title: '16在拯救生命的路上，我们矢志不渝中国干细胞集团移植满2500例', content: '2017年5月3日，中国干细胞集团联合上海市第一人民医院，成功为26岁的患者小杨进行了脐带血造血干细胞移植。这是中国干细胞集团成立13年来完成的第2500例脐带血造血干细胞临床移植。中国干细胞集团成为国内首家脐带血造血干细胞移植数达到2500例的专业机构...', name: '杨**', age: 26, weight: '56kg', hospital: '上海市第一人民医院', illnessName: '急性淋巴细胞白血病'},
        {id: 16, image: require('../../assets/product/case01.jpg'), title: '17在拯救生命的路上，我们矢志不渝中国干细胞集团移植满2500例', content: '2017年5月3日，中国干细胞集团联合上海市第一人民医院，成功为26岁的患者小杨进行了脐带血造血干细胞移植。这是中国干细胞集团成立13年来完成的第2500例脐带血造血干细胞临床移植。中国干细胞集团成为国内首家脐带血造血干细胞移植数达到2500例的专业机构...', name: '杨**', age: 26, weight: '56kg', hospital: '上海市第一人民医院', illnessName: '急性淋巴细胞白血病'},
        {id: 17, image: require('../../assets/product/case01.jpg'), title: '18在拯救生命的路上，我们矢志不渝中国干细胞集团移植满2500例', content: '2017年5月3日，中国干细胞集团联合上海市第一人民医院，成功为26岁的患者小杨进行了脐带血造血干细胞移植。这是中国干细胞集团成立13年来完成的第2500例脐带血造血干细胞临床移植。中国干细胞集团成为国内首家脐带血造血干细胞移植数达到2500例的专业机构...', name: '杨**', age: 26, weight: '56kg', hospital: '上海市第一人民医院', illnessName: '急性淋巴细胞白血病'},
        {id: 18, image: require('../../assets/product/case01.jpg'), title: '19在拯救生命的路上，我们矢志不渝中国干细胞集团移植满2500例', content: '2017年5月3日，中国干细胞集团联合上海市第一人民医院，成功为26岁的患者小杨进行了脐带血造血干细胞移植。这是中国干细胞集团成立13年来完成的第2500例脐带血造血干细胞临床移植。中国干细胞集团成为国内首家脐带血造血干细胞移植数达到2500例的专业机构...', name: '杨**', age: 26, weight: '56kg', hospital: '上海市第一人民医院', illnessName: '急性淋巴细胞白血病'}
      ]
    }
  },
  methods: {
    findAllNews () {
      api.findAllNews()
        .then(res => {
          if (res.code === 200) {
            this.caseList = res.result
            for (const i in res.result) {
              this.caseList[i].createdate = this.caseList[i].createdate.split(' ')[0]
              this.caseList[i].content = this.caseList[i].content.split('</p>')[0].split('<p>')[1] + '...'
            }
          } else {
            console.log(res.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    async handleCurrentChange () {
      console.log('page: ===> ' + this.currentPage)
	    this.updateCases(this.currentPage)
    },
	  updateCases (page) {
      console.log('page: ===> ' + this.currentPage)
      for (let i in this.caseList2) {
        console.log((parseInt(i) + page))
        console.log((4 * page - 1))
        if ((parseInt(i) + page) % 4 !== 0 && (4 * page - 1) !== parseInt(i)) {
          this.caseList[i] = this.caseList2[i]
        } else {
          return
        }
      }
      console.log(this.caseList)
	  }
  },
  created () {
    this.totals = this.caseList2.length
	  this.updateCases(1)
  }
}
</script>
<style rel="stylesheet/scss" type="text/scss" lang="scss" scoped>
	@import "../../styles/common.css";
	.j-case{
		.case-box{
			margin: 50px auto 80px auto;
			border: 1px solid red;
			.case-list{
				margin-bottom: 10px;
				padding: 0 15px;
				li{
					width: 100%;
					position: relative;
					padding-left: 180px;
					min-height: 98px;
					margin-bottom: 50px;
					.jc-img{
						position: absolute;
						left: 0;
						top: 0;
						a{
							color: #666;
							text-decoration: none;
							img{
								width: 165px;
								height: 98px;
							}
						}
					}
					.jc-content{
						.jc-tt{
							position: relative;
							padding-right: 165px;
							border-bottom: solid 1px #dfdede;
							padding-bottom: 10px;
							text-align: left;
							a{
								font-size: 16px;
								font-weight: 600;
								color: #010101;
							}
							.jc-illness{
								position: absolute;
								right: 0;
								top: 0;
								color: #b2b2b2;
								font-size: 14px;
								p{
									display: inline-block;
									margin: 0;
									span{
										font-weight: bold;
										color: #2ea7e0;
									}
								}
							}
						}
						.jc-txt {
							color: #878787;
							font-size: 14px;
							margin-top: 8px;
							text-align: left;
						}
						.jc-doc-txt{
							p{
								display: inline-block;
								margin-right: 20px;
								font-size: 14px;
								span{
									color: #2ea7e0;
									font-weight: bold;
								}
							}
						}
					}
				}
			}
			.jc-page-box{
				padding: 10px 0;
				border: 1px solid red;
				text-align: center;
			}
		}
	}
	@media (max-width: 767px){
		.case-box{
			.case-list{
				li{
					padding-left: 0!important;
					margin-bottom: 25px!important;
					.jc-img{
						width: 100%;
					}
					.jc-content{
						width: 100%;
						.jc-tt{
							padding-right: 0!important;
							overflow: hidden;
							text-overflow: ellipsis;
							a{
								display:block;/*内联对象需加*/
								width:12em;
								word-break:keep-all;/* 不换行 */
								white-space:nowrap;/* 不换行 */
								overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
								text-overflow:ellipsis;
								float: left;
							}
						}
					}
				}
			}
			.jc-img{
				display: none;
			}
		}
	}
</style>
<style rel="stylesheet/scss" type="text/scss" lang="scss">
	.j-case{
		.case-box{
			.jc-page-box{
				border: 1px solid red;
				.el-pagination.is-background .btn-next,
				.el-pagination.is-background .btn-prev,
				.el-pagination.is-background .el-pager li {
					margin: 0 6px;
					background-color: #d7d7d7;
					color: #ffffff;
					min-width: 38px;
					min-height: 38px;
					line-height: 38px;
					border-radius: 5px;
					font-size: 14px;
				}
				.el-pagination.is-background .btn-next,
				.el-pagination.is-background .btn-prev{
					background-color: #ff7681;
				}
				.el-pagination.is-background .el-pager li:not(.disabled).active {
					background-color: #ff7681;
					color: #fff;
				}
				.el-icon-arrow-left:before {
					content: "\E60A";
				}
				.el-icon-arrow-right:before {
					content: "\E60E";
				}
				.el-pagination .btn-next .el-icon,
				.el-pagination .btn-prev .el-icon {
					display: block;
					font-size: 14px;
					font-weight: 700;
				}
			}
		}
	}
</style>
